<template>
  <div>
    <!-- 顶部导航 -->
    <Header></Header>

    <!-- swiper banner -->
    <swiper :options="swiperOption">
      <swiper-slide>
        <div>
          <img class="banner_img" src="./images/1.jpg" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="banner_img" src="./images/2.jpg" alt="">
        </div>
      </swiper-slide>
      <swiper-slide>
        <div>
          <img class="banner_img" src="./images/3.jpg" alt="">
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div><!--左箭头-->
      <div class="swiper-button-next" slot="button-next"></div><!--右箭头-->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <!-- 中部内容 -->
    <div class="center-content" style="margin-top: 40px;">
      <Row type="flex" justify="center" :gutter="16">
        <Col span="4">
          <router-link to="/product">
            <div>
              <img class="product_img" src="./images/m1.jpg" alt="">
            </div>
          </router-link>
        </Col>
        <Col span="4">
          <div>
            <img class="product_img" src="./images/m2.jpg" alt="">
          </div>
        </Col>
        <Col span="4">
          <div>
            <img class="product_img" src="./images/m3.jpg" alt="">
          </div>
        </Col>
      </Row>
    </div>

    <div>
      <div class="slogan">
        <h2>驾培互联网服务领导者</h2>
        <div>正在服务1000万驾考用户，364家驾校，行走在驾培改革最前沿</div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '../../components/Header.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  data () {
    return {
      theme1: 'light',
      swiperOption: {
        notNextTick: true,
        // 循环
        loop: true,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 自动播放
        autoplay: true,
        // autoplay: {
        //     delay: 3000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: true,
        // },
        // 设置轮播
        effect: 'slide',
        // 滑动速度
        speed: 800,
        // 滑动方向
        direction: 'horizontal',
        // 小手掌抓取滑动
        // grabCursor : true,
        // 滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        },
        // 左右点击
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 分页器设置
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },

  components: {
    Header,
    swiper,
    swiperSlide
  }
}
</script>

<style>
.banner_img, .product_img{
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.product_img:hover{
  transition: all 0.6s;
  transform: scale(1.1);
}

.slogan{
  margin-top: 40px;
}

.center-content>:first-child{
  margin: 0 0 !important;
}

</style>
